import React,{Component} from 'react';
import './App.css';
import {Button,Table,Modal,DatePicker,Input,Select,Rate    } from 'antd'
import request from './util/request'
const { Option } = Select;

const columns = [
    {
        title: '时间',
        dataIndex: 'timer',
    },
    {
        title: '标题',
        dataIndex: 'title',
    },
    {
        title: '作者',
        dataIndex: 'author',
    },
    {
        title:'重要性',
        dataIndex:'important'
    },
    {
        title:'阅读数',
        dataIndex:'num'
    },
    {
        title:'状态',
        dataIndex:'status'
    }
];

interface ItemInterace{
    author:string
    id: number
    important: number
    num: number
    status: string
    timer: string
    title: string
}
  
interface IState{
    data:ItemInterace[],
    visible: boolean,
    title:string, //标题
    status:string,
    important:number,
    timer:string 
}

//函数式组件   类组件组件
class App extends Component<{},IState>{
    state = {
        data:[],
        visible:false,     //控制弹窗显示和隐藏
        title:'',          //标题
        status:'',         //状态
        important:1,       //重要性  
        timer:''           //时间
    }

    //打开弹窗
    showModal = () => {
        this.setState({
          visible: true,
        });
    };
    
    //点击确定
    handleOk = (e:any) => {
        console.log(e);
        let {timer,title,status,important} = this.state;
        request.post('/api/put',{timer,title,status,important}).then(res => {
            console.log(res);
            if(res.data.code === 1){
                this.getData();
                this.setState({
                    visible: false,
                });
            }
        })
    };
    
    //点击取消
    handleCancel = (e:any) => {
        console.log(e);
        this.setState({
          visible: false,
        });
    };

    //改变时间
    onChangeTime = (value:any, dateString:string) =>{
        this.setState({
            timer:dateString
        })
    }
      
    //选择状态
    onChange = (value:string) =>{
        this.setState({
            status:value
        })
    }

    //选择重要性
    changeStar = (value:number) => {
        this.setState({
            important:value
        })
    }

    //修改标题
    onChangeIpt = (e:any) => {
        this.setState({
            title:e.target.value
        })
    }

    getData(){
        request.get('/api/bookslist').then(res => {
            if(res.data.code === 1){
                this.setState({
                    data:res.data.data
                })
            }
        })
    }
    
    componentDidMount(){
        this.getData();
    }
    render(){
        let {data,title} = this.state;
        return <div>
            <Button type="primary" onClick={this.showModal}>添加</Button>
            <Table columns={columns} dataSource={data} size="middle" pagination={{
                pageSize:2
            }} />
            <Modal
                title="Basic Modal"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                >
                <div>
                    时间： <DatePicker showTime onChange={this.onChangeTime}/>
                </div>
                <div>
                    标题：<Input placeholder="Basic usage" value={title} onChange={this.onChangeIpt}/>
                </div>
                <div>
                    状态：<Select
                        style={{ width: 200 }}
                        placeholder="Select status"
                        onChange={this.onChange}
                    >
                        <Option value="published">published</Option>
                        <Option value="draft">draft</Option>
                    </Select>
                </div>
                <div>
                    重要性：<Rate count={3} onChange={this.changeStar}></Rate>
                </div>
            </Modal>
        </div>
    }
}
export default App;


/**
 * 1.创建react+ts的项目
 * 
 * 2.下载antd，项目内引入antd
 * 
 * 3.axios的二次封装
 * 
 * 4.antd table集成分页的功能  后台直接请求所有的数据
 * 
 * 
 * 今天的作业：egg的后台服务 增删改查     2.把前端自己做做 react+ts+antd
 * */ 